<template>
  <div class="dashboard-editor-container">
    <panel-group :data="numobj"/>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="6" :lg="6">
        <el-col :xs="24" :sm="24" :lg="24" style="padding-right:0">
          <div class="chart-wrapper">
            
            <el-tabs style="height:370px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="同步" name="tongbu"><recentlyAccelerated v-if="activeName==='tongbu'" :title="'文件同步磁盘'" :list ='BackupList' :dataList ='dataList'/></el-tab-pane>
                <el-tab-pane label="转储" name="zhuanchu"><recentlyAccelerated v-if="activeName==='zhuanchu'" :title="'文件转储磁盘'" :list="dumpObject" :dataList ='dumpList'/></el-tab-pane>
                <el-tab-pane label="系统" name="system"><recentlyAccelerated v-if="activeName==='system'" :title="'系统磁盘'" :list="ghostObject" :dataList ='backList'/></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" style="padding-right:0">
          <div class="chart-wrapper">
            <el-tabs style="height:370px;" v-model="activeName2" @tab-click="handleClick2">
              <el-tab-pane label="严重性等级" name="seriousness"><recentlyAccelerated v-if="activeName2==='seriousness'"   :dataList ='seriousnessList'/></el-tab-pane>
              <el-tab-pane label="终端" name="terminal"><recentlyAccelerated v-if="activeName2==='terminal'"  :dataList ='terminalList'/></el-tab-pane>
            </el-tabs>
            <!-- <recentlyAccelerated :title="'文件转储磁盘'" :list="dumpObject" :dataList ='dumpList'/> -->
          </div>
        </el-col>
      </el-col>
      
      <el-col :xs="24" :sm="12" :lg="12">
        <el-col :xs="24" :sm="24" :lg="24" style="padding:0">
          <div class="chart-wrapper">
            <relation-chart :IP='EthIP' :chartData="topoData"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" style="padding:0">
          <div class="chart-wrapper">
            <transaction-table />
          </div>
        </el-col>
      </el-col>
      

      <el-col :xs="24" :sm="6" :lg="6">
        <el-col :xs="24" :sm="24" :lg="24" style="padding-left:0">
          <div class="chart-wrapper">
            <flieChart :dataList="fileData"></flieChart>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" style="padding-left:0">
          <div class="chart-wrapper">
            <systemStatus :list ='systemStatusList'/>
          </div>  
        </el-col>  
      </el-col>
      
    </el-row>
    
    
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import flieChart from './components/flieChart'
import systemStatus from './components/systemStatus'
import recentlyAccelerated from './components/recentlyAccelerated'
import accelerateDomainName from './components/accelerateDomainName'
import accelerateUsers from './components/accelerateUsers'
import TransactionTable from './components/TransactionTable'
import relationChart from './components/relationChart.vue'
import { getNowDay, parseTime } from '@/utils/index.js'
import { connrequest, GetEventLog, GetHistorySumStreamLog } from '@/api/firstPage.js'
// import { parseTime, formatTime } from '@/utils/index.js'
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    flieChart,
    LineChart,
    systemStatus,
    recentlyAccelerated,
    accelerateDomainName,
    accelerateUsers,
    TransactionTable,
    relationChart
  },
  data() {
    return {
      lineChartData:{
        UpByte:[],
        DownByte:[],
        TransTime:[]
      },
      topoData:[],
      systemStatusList:{},
      BackupList:{
        allVal:0,
        useVal:0
      },
      numobj:{
        TodayDumpLogCount: 0,
        TodayFileOptLogCount: 0,
        TodayBackupDBCount: 0,
        TodayBackupSystemCount: 0,
        OfflineCount:0,
        OnlineCount:0,
        TodayVirusLogCount:0,
      },
      EthIP:'',
      dumpObject:{
        allVal:0,
        useVal:0
      }, //文件转储
      ghostObject:{
        allVal:0,
        useVal:0
      }, //文件转储
      dataList:[],
      dumpList:[],
      backList:[],
      fileData:[],
      seriousnessList:[],
      terminalList:[],
      activeName:'tongbu',
      activeName2:'seriousness'
    }
  },
  created(){
    this.getData();
    this.getTopoData();
    this.getFileOptLog();
    this.GetDiskInfo();
    this.usbDump();
    this.usbGhost();
    this.GetEventLogSumGroupByLevel();
    this.GetEventLogSumGroupByUser();
  },
  mounted() {
    
    // this.GetHistorySumStreamLog()
    // this.GetParamDictURL()
  },
  methods: {
    handleClick(tab,event){
      console.log(tab);
    },
    handleClick2(){

    },
    async getData(){
      const res = await connrequest('GetFirstPage')
      let d = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
      let h = Math.floor((res.Data.KeepRunningSeconds  % 86400) / 3600);
      var m = Math.floor(((res.Data.KeepRunningSeconds % 86400) % 3600) / 60);
      res.Data.KeepRunningSeconds = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${h}小时 ${m}分钟`;
      res.Data.EthIP = res.Data.EthIP ? res.Data.EthIP : '接口无效'
      this.EthIP = res.Data.EthIP;
      res.Data.WifiIP = res.Data.WifiIP ? res.Data.WifiIP : '接口无效'
      let now = new Date().getTime()
      // this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
      this.Days = Math.floor((res.Data.ValidTime*1000 - now) / 86400 / 1000)
      res.Data.ValidTime = parseTime(res.Data.ValidTime, '{y}-{m}-{d}')
      res.Data.CurrentTime = parseTime(res.Data.CurrentTime)
      res.Data.MemUsedPct = ((res.Data.MemUsed / res.Data.MemTotal) * 100).toFixed(1) * 1
      res.Data.MemUsed = (res.Data.MemUsed / 1000000).toFixed(2) + 'G'
      res.Data.MemTotal = (res.Data.MemTotal / 1000000).toFixed() + 'G'
      res.Data.DiskUsedPct = ((res.Data.DiskUsed_Sys / res.Data.DiskTotal_Sys) * 100).toFixed(1) * 1
      res.Data.DiskUsed = (res.Data.DiskUsed / 1000000).toFixed(2) + 'G'
      res.Data.DiskTotal = (res.Data.DiskTotal / 1000000).toFixed(0) + 'G'
      this.systemStatusList = {...res.Data}
      this.systemStatusList.Days = this.Days
      this.BackupList.allVal = (res.Data.DiskTotal_Backup)/1000/1000;
      this.BackupList.useVal = (res.Data.DiskUsed_Backup)/1000/1000;
      this.dumpObject.allVal = (res.Data.DiskTotal_Dump)/1000/1000;
      this.dumpObject.useVal = (res.Data.DiskUsed_Dump)/1000/1000;
      this.ghostObject.useVal = (res.Data.DiskUsed_Ghost)/1000/1000;
      this.ghostObject.allVal = (res.Data.DiskTotal_Ghost)/1000/1000;
      this.numobj.TodayVirusLogCount = res.Data.TodayVirusLogCount //恶意代码文件数量
      this.numobj.OfflineCount = res.Data.OfflineCount
      this.numobj.OnlineCount = res.Data.OnlineCount
      this.numobj.TodayBackupDBCount = res.Data.TodayBackupDBCount //数据库
      this.numobj.TodayFileOptLogCount = res.Data.TodayFileOptLogCount //文件同步
      this.numobj.TodayBackupSystemCount = res.Data.TodayBackupSystemCount //操作系统
      this.numobj.TodayDumpLogCount =  res.Data.TodayDumpLogCount// 转储版本
      
      // this.dataList = res.Data.disk_backup;
      this.dumpList = res.Data.disk_dump;
    },
    async getTopoData(){
      const res = await connrequest('GetEmployeeStatus');
      // console.log(res);
      res.Data.map(item=>{
        console.log(item);
        this.topoData.push({
          value:item.Name,
          Status:item.Status
        })
      })
    },
    async getFileOptLog(){
      const res = await connrequest('GetFileOptLogSumGroupByDate');
      res.Data.map(item=>{
        this.fileData.push({
          value:item.Name,
          name:item.Count
        })
      })
    },
    async GetDiskInfo(){
      const data = {
        Filter:{
          Disk: "/usb_backup"
        }
      }
      const res = await connrequest('GetDiskInfo',data);
      // console.log(res);
      this.dataList = res.Data.disk 
    },
    async GetEventLogSumGroupByLevel(){
      this.seriousnessList = [];
      const date = this.$store.state.user.SumDays
      const data = {
        Filter:{
          StartTime:parseTime(new Date(new Date().getTime() - date * 24 * 60 * 60 * 1000)),
          EndTime:''
        }
      }
      const res = await connrequest('GetEventLogSumGroupByLevel',data);
      res.Data.map(item=>{
        if (item.ClassID===1) {
          item.ClassID = '致命'
        }else if(item.ClassID===2){
          item.ClassID = '紧急'
        }else if(item.ClassID===3){
          item.ClassID = '重要'
        }else if(item.ClassID===4){
          item.ClassID = '监视'
        }else if(item.ClassID===5){
          item.ClassID = '普通'
        }else if(item.ClassID===6){
          item.ClassID = '通知'
        }
        this.seriousnessList.push({
          Dir:item.ClassID,
          Size:item.Count
        })
      })
    },
    async GetEventLogSumGroupByUser(){
      this.terminalList = [];
      const date = this.$store.state.user.SumDays
      const data = {
        Filter:{
          StartTime:parseTime(new Date(new Date().getTime() - date * 24 * 60 * 60 * 1000)),
          EndTime:'',
          EventLevel:this.$store.state.user.EventLevel
        }
      }
      const res = await connrequest('GetEventLogSumGroupByUser',data);
      res.Data.map(item=>{
        this.terminalList.push({
            Dir:item.Name,
            Size:item.Count
        })
      })  
    },
    
    async usbDump(){
      const data = {
        Filter:{
          Disk: "/usb_dump"
        }
      }
      const res = await connrequest('GetDiskInfo',data);
      // console.log(res);
      this.dumpList = res.Data.disk 
    },

    async usbGhost(){
      let date = this.$store.state.user.SumDays
      const data = {
        Filter:{
          Disk: "/usb_ghost"
        }
      }
      const res = await connrequest('GetDiskInfo',data);
      // console.log(res);
      this.backList = res.Data.disk 
    }
    // async GetHistorySumStreamLog(){
    //   // 默认取30分钟前
    //   let date = new Date()
    //   let i = date.getMinutes()
    //   let StartTime = parseTime(date.setMinutes( i - 30 ),'{y}-{m}-{d} {h}:{i}:{s}')
    //   // let getNowDay = getNowDay('')
    //   const data = {
    //     Filter: {
    //       StartTime: StartTime
    //       // Name: "192.168.17.99"
    //     }
    //   }
    //   const res = await GetHistorySumStreamLog(data)
    //   let lineChartData = {UpByte: [], DownByte: [], TransTime: []}
    //   res.Data.forEach(item => {
    //     lineChartData.UpByte.push((item.UpByte / 1000).toFixed(2))
    //     lineChartData.DownByte.push((item.DownByte / 1000).toFixed(2))
    //     lineChartData.TransTime.push(parseTime(item.TransTime, '{h}:{i}'))
    //   })
    //   this.lineChartData = lineChartData
    // },
    // // 获取域名分类
    // async GetParamDictURL(){
    //   const res = await connrequest('GetParamDictURL')
    //   window.sessionStorage.setItem('ParamDictURL', JSON.stringify(res.Data))
    // }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
  ::v-deep .chart-wrapper {
    background: #fff;
    padding: 16px 16px;
    margin-bottom: 16px;
    .el-table--medium th, .el-table--medium td{
      padding: 3px  0!important;
    }
  }
  ::v-deep .chart-wrapper2 {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 16px;
    .el-table--medium th, .el-table--medium td{
      padding: 3px  0!important;
    }
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width:3px !important;
    background-color:#F5F5F5 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow:inset 0 0 6px rgba(0,0,0,0.3) !important;
    background-color:#F5F5F5 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius:10px !important;
    box-shadow:inset 0 0 6px rgba(0,0,0,.3) !important;
    background-color:#999 !important;
  }
  ::v-deep .el-tabs__header{
    margin:0px !important;
  }
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .chart-wrapper2 {
    padding: 8px;
  }
}
</style>